<template>
  <div class="aaa" style="display:flex;">
    <el-select  v-model="selectedProvince" placeholder="请选择" filterable>
      <el-option
        v-for="item in provinces"
        v-if="item.level === 1"
        :key="item.name"
        :label="item.name"
        :value="item.name">
      </el-option>
    </el-select>
    <el-select  v-model="selectedCity" placeholder="请选择" filterable>
      <el-option
        v-for="item in cities"
        :key="item.name"
        :label="item.name"
        :value="item.name">
      </el-option>
    </el-select>
    <el-select  v-model="selectedBlock" placeholder="请选择" filterable>
      <el-option
        v-for="item in blocks"
        :key="item.name"
        :label="item.name"
        :value="item.name">
      </el-option>
    </el-select>
  </div>
</template>
<script>
/**
*  省 市 区/县城  三联动选择器
*/
import provinces from '@/utils/provinces.js'

/**
*selectName 可以是省、地区的名字
*/
var queryDi = function(selectName,sheng){
  var resultArr = [];
  provinces.forEach((item,index)=>{
    if(sheng === ""){
      if (item.name === selectName && selectName === item.name) {
        resultArr.push(item);
        return;
      }
    }else{
      if (item.name === selectName && selectName === item.name && sheng === item.sheng) {
        resultArr.push(item);
        return;
      }
    }
  });
  return resultArr;
};

var queryFilter = function(selectName,level,provinces,shengValue){
  var selectItem = queryDi(selectName,shengValue);
  var result = [];
  if (selectName === '台湾省' || selectName === '香港特别行政区' || selectName === '澳门特别行政区') {
    result = selectItem;
  } else {
    var obj = selectItem[0];
    if(level === 2){
      result = provinces.filter(item => {
        if (item.level === level && item.sheng && obj.sheng === item.sheng) {
          return true;
        }
      });
    }else{
      result = provinces.filter(item => {
        if (item.level === 3 && item.sheng && item.sheng == obj.sheng && item.di === obj.di && item.name !== '市辖区') {
          return true;
        }
      });
    }
  }
  return result;
}
export default {
  props:{
    defaultProvince:{
      type:String,
      default:()=>{
        return "";
      }
    },
    defaultCity:{
      type:String,
      default:()=>{
        return "";
      }
    },
    defaultBlock:{
      type:String,
      default:()=>{
        return "";
      }
    }
  },
  watch: {
    defaultProvince:{
      immediate:true,
      handler:function(){
        var me = this;
        // console.log("defaultProvince");
        if(me.defaultProvince !== "" && me.defaultProvince !== null){
          if(me.onlyFlagA){
            me.selectedProvince = me.defaultProvince;
            me.cities = queryFilter(me.selectedProvince,2,me.provinces,"");
            me.onlyFlagA = false;
          }
        }
      }
    },
    defaultCity:{
      immediate:true,
      handler:function(){
         var me = this;
        // console.log("defaultCity");
        if(me.defaultCity !== "" && me.defaultCity !== null){
          if(me.onlyFlagB){
            me.selectedCity = me.defaultCity;
            me.blocks = queryFilter(me.selectedCity,3,me.provinces,"");
            me.onlyFlagB = false;
          }
        }
      }
    },
    defaultBlock:{
      immediate:true,
      handler:function(){
        var me = this;
        // console.log("defaultBlock");
        if(me.defaultBlock !== "" && me.defaultBlock !== null){
          if(me.onlyFlagC){
            me.selectedBlock = me.defaultBlock;
            me.onlyFlagC = false;
          }
        }
      }
    },
    selectedProvince(newVal, oldVal) {
      var me = this;
      // 港澳台数据只有一级,特殊处理
      // console.log("selectedProvince");
      var selectItem = queryDi(newVal,"");
      if (newVal === '台湾省' || newVal === '香港特别行政区' || newVal === '澳门特别行政区') {
        me.cities = selectItem;
        me.blocks = selectItem;
      } else {
        var obj = selectItem[0];
        me.cities = me.provinces.filter(item => {
          if (item.level === 2 && item.sheng && obj.sheng === item.sheng) {
            return true;
          }
        });
      }
      // 此时在渲染DOM,渲染结束之后再选中第一个
      me.$nextTick(() => {
        me.dqsssheng = me.cities[0].sheng;
        me.selectedCity = me.cities[0].name;
        //由于直辖市的level2都是市辖区和县，所以这里必须手动执行
        if(me.selectedCity === "市辖区"){
          me.flag = false;
          me.$emit('dq-change', "市辖区");
          me.blocks = queryFilter(me.selectedCity,3,me.provinces,me.dqsssheng);
          me.selectedBlock = me.blocks[0].name;
        }
        me.$emit('sheng-change', newVal);
      })
    },
    selectedBlock(newVal, oldVal) {
      var me = this;
      // console.log("selectedBlock");
      me.$nextTick(() => {
        me.$emit('xian-change', newVal);
      });
    },
    selectedCity(newVal,oldVal) {
      // console.log("selectedCity");
      var me = this;
      if(!me.flag){
        me.flag = true;
        return ;
      }
      // 选择了一个市,要选择区了 di是城市的代表,sheng
      var selectItem = queryDi(newVal,me.dqsssheng);
      if (newVal === '台湾省' || newVal === '香港特别行政区' || newVal === '澳门特别行政区') {
        me.blocks = selectItem;
        me.cities = selectItem;
      } else {
        var obj = selectItem[0];
        //查询满足条件的值
        me.blocks = me.provinces.filter(item => {
          if (item.level === 3 && item.sheng && item.sheng == obj.sheng && item.di === obj.di && item.name !== '市辖区') {
            return true;
          }
        });
      }
      me.$nextTick(() => {
        me.$emit('dq-change', newVal);
        me.selectedBlock = me.blocks[0].name;
      });
    }
  },
  data() {
    return {
      provinces:provinces,//省市县json
      selectedProvince: "",
      selectedCity: "",
      selectedBlock: "",
      cities: [],
      blocks: [],
      dqsssheng:"",//地区所属省
      flag:true,
      onlyFlagA:true,
      onlyFlagB:true,
      onlyFlagC:true,
    };
  }
}
</script>
<style lang="scss">
.aaa{
  .el-input__inner{
    padding-right:15px;
  }
}
</style>